<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>
<body>
<div class="container">
  <ul class="nav nav-tabs mb20">
    <li class="active"><a href="index.html">检测人脸</a></li>
    <li><a href="compareCode.html">相似度比较</a></li>
    <li><a href="centerFace.html">检测最中心人脸</a></li>
    <li><a href="addFeature.html">添加特征码</a></li>
    <li><a href="../client/index.html" target="_blank">切换版本</a></li>
    <li><a href="../index.html">返回首页</a></li>
  </ul>
  <div class="div-upload">
    <div class="div-btn">
      <button type="button" class="btn btn-default btn-blue">点击上传</button>
      <button type="button" class="btn btn-default btn-blue submit">点击检测</button>
      <button type="button" class="btn btn-default closeBtn">隐藏五官坐标</button>
    </div>
    <div class="tips">
      <p>调用的接口：/FaceApi/detectFace</p>
      <p>请求方式：post</p>
      <p>接口参数：data: JSON.stringify({imgData: imgCommon})</p>
      <p>参数解析：参数名(imgData) : 参数内容(照片的base64字符串)，使用JSON.stringify()，将参数内容转为json字符串发送给服务端</p>
      <p class="txtDiv none">检测耗时：<span class="txtTime" style="color: #409eff;">0</span>秒</p>
      <p class="txtDiv none" style="color: #409eff;">检测成功，鼠标经过人脸框，可查看返回详细信息</p>
    </div>
    <input type="file" onchange="previewImage(this),hideBtn();" id="photoimg" class="btn-file" />
    <div class="preview" id="preview"><img src="" alt="" /></div>
  </div>
  <!-- 提示语 -->
  <div class="box">
    <div class="msg">提示成功</div>
  </div>
</div>
<script src="../style/js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="js/preview.js"></script>
<script>
  // 重新点击上传图片时，隐藏按钮
  function hideBtn() {
    $('.closeBtn').text('隐藏五官坐标');
    isOk = true;
    $('.closeBtn').hide();
  }
 
  
  // 提交检测
  $('.submit').click(function () {
    isOk = true;
    $('.closeBtn').text('隐藏五官坐标');
    
    var imgViewWid = $('.preview img').width();
    var imgViewHei = $('.preview img').height();
    // 开始时间
    var startTime = new Date().getTime();

    $.ajax({
      type: "post",
      url: req_prefix + '/FaceApi/detectFace',
      xhrFields: {
        withCredentials: true
      },
      crossDomain: true,
      contentType: "application/json",
      data: JSON.stringify({
        imgData: imgCommon
      }),
      success: function (data) {
        // 结束时间
        var endTime = new Date().getTime();
        var textTime = (endTime - startTime) / 1000;
        $('.txtDiv').show();
        $('.txtTime').text(textTime);

        let result = data.result;
        if (result.length) {
          for (var i = 0; i < result.length; i++) {
            var local = result[i].pos;
            var mouthLoc = result[i].mouth;

            var preceWid = imgViewWid / imgNatWid;
            var preceHei = imgViewHei / imgNatHei;

            
            //JSON字符串话返回的数据并显示 
            var angle = JSON.stringify(result[i].angle);
            var ei = JSON.stringify(result[i].ei);
            var mouth = JSON.stringify(result[i].mouth);
            var nose = JSON.stringify(result[i].nose);
            var pos = JSON.stringify(result[i].pos);
            var tips = '<div class="tips-hover tips"><p>angle:' + angle + '</p><p>ei:' + ei + '</p><p>mouth:' + mouth + '</p><p>nose:' + nose + '</p><p>pos:' + pos + '</p></div> ';
            

            var html = '<div class="drawDiv" style="left:' + local.left * preceWid + 'px;top:' + local.top * preceHei + 'px;width:' + local.width * preceWid + 'px;height:' + local.height * preceHei + 'px;">' + tips +'</div>';

            // 鼻子坐标
            var noseLe = Number(result[i].nose.x * preceWid) - Number(8);
            var noseTo = Number(result[i].nose.y * preceHei) - Number(8);
            var noseHtml = '<div class="otherPos" style="left:' + noseLe + 'px;top:' + noseTo + 'px"></div>'

            // 嘴巴坐标
            var mouthLe = Number(result[i].mouth.x * preceWid) - Number(8);
            var mouthTo = Number(result[i].mouth.y * preceHei) - Number(8);
            var mouthHtml = '<div class="otherPos" style="left:' + mouthLe + 'px; top:' + mouthTo + 'px"></div>'

            // 左眼睛坐标
            var eyeLe = Number(result[i].ei.leftx * preceWid) - Number(8);
            var eyeTo = Number(result[i].ei.lefty * preceHei) - Number(8);
            var eyeLeftHtml = '<div class="otherPos" style="left:' + eyeLe + 'px; top:' + eyeTo + 'px"></div>'
            // 右眼睛坐标
            var eyeRiLe = Number(result[i].ei.rightx * preceWid) - Number(8);
            var eyeRiTo = Number(result[i].ei.righty * preceHei) - Number(8);
            var eyeRiHtml = '<div class="otherPos" style="left:' + eyeRiLe + 'px; top:' + eyeRiTo + 'px"></div>'
            

            $('.preview').append(html, noseHtml, mouthHtml, eyeLeftHtml, eyeRiHtml);
            $('.closeBtn').show();
          }
        } else {
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text('请提交人脸照片');
        }
      },
      error: function (error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(error.responseJSON.error);
      }
    })
  })


  // 显示/关闭五官位置的显示
  var isOk = true;
  $('.closeBtn').click(function() {
    if(isOk){
      $('.preview').find('.otherPos').hide();
      $(this).text('显示五官坐标');
      isOk = false;
    }else{
      $('.preview').find('.otherPos').show();
      $(this).text('隐藏五官坐标');
      isOk = true;
    }
  })


  $('.preview').on('mouseenter', ".drawDiv", function () {
    $(this).children().show();
  }).on('mouseleave', '.drawDiv', function () {
    $(this).children().hide()
  })
</script>
</body>
</html>